<template>
  <div class="container" @click.stop="showLanguage = false">
    <div class="page_content container-tt">
      <header class="flex_between">
        <div class="headLogo">
          <nuxt-link to="/el">
            <div class="flex_">
              <img
                src="/static/logo.svg"
                class="img"
                alt="logo"
                width="34"
                height="34"
              />
              <span class="projectName">SavingTik</span>
            </div>
          </nuxt-link>
        </div>
        <div class="headTabs flex_">
          <!-- <div class="tItem">
            <nuxt-link to="/el">
              <div @click="goToTop('video')">Πρόγραμμα λήψης TikTok</div>
            </nuxt-link>
          </div> -->
          <div class="tItem">
            <nuxt-link to="/el/download-tiktok-mp3">
              <div @click="goToTop('mp3')">Κατεβάστε το TikTok MP3</div>
            </nuxt-link>
          </div>
          <div class="tItem tItemBlod bor">
            <nuxt-link to="/el/download-tiktok-story">
              <div @click="goToTop('story')">Κατεβάστε το TikTok Story</div>
            </nuxt-link>
          </div>
          <language ref="languageRef"></language>
        </div>
        <div class="drawer" @click="showAppRightHandel">
          <img src="/static/menu.png" class="img" alt="menu" />
        </div>
      </header>
      <div class="banner_box flex_center">
        <div class="banner flex_ccenter">
          <h1 class="h1">Κατεβάστε το TikTok Story</h1>
          <!-- <h2 class="h2">- Tiktok Downloader, Without Watermark. Fast. -</h2> -->
        </div>
      </div>
      <div class="downloadInput flex_center">
        <div class="inputBox flex_between">
          <input
            type="text"
            v-model="input"
            @keydown="sendDownload($event)"
            @input="handleInput"
            @paste="handleInput"
            class="ipt"
            placeholder="Επικολλήστε εδώ τον σύνδεσμο TikTok"
            :disabled="isHttpLoading"
          />
          <div
            class="clearx flex_ccenter"
            v-if="input != ''"
            @click.stop="input = ''"
          >
            <img src="/static/clear.png" class="img" alt="" />
          </div>
          <div
            class="downBtn shou flex_ccenter"
            :class="isHttpLoading ? 'isHttpLoading' : ''"
            @click.stop="Download"
          >
            <div class="downImg">
              <img src="/static/download.webp" class="img" alt="download" />
            </div>
            <div class="iptbtn">Κατεβάστε</div>
          </div>
          <div class="posi shou" v-if="input != ''" @click.stop="input = ''">
            <img src="/static/clear.png" class="img" alt="" />
          </div>
        </div>
      </div>
      <div class="downStorySuccess" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
          <div class="downBtn flex_ccenter shou" @click="allIn">
            Κατεβάστε Όλα
          </div>
        </div>
        <div class="storyImageList flex_between">
          <div class="item" :key="k" v-for="(item, k) in downData.images">
            <client-only>
              <el-image
                style="width: 100%; height: 100%"
                fit="cover"
                :src="item"
                :preview-src-list="downData.images"
              >
              </el-image>
            </client-only>
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img
                  src="/static/download.webp"
                  class="xiazai"
                  alt="download"
                />
                <div>Κατεβάστε Φωτογραφία</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1 flex_between">
                <div class="tit flex_">
                  <div class="timg">
                    <img
                      src="/static/blue.webp"
                      class="img"
                      alt="blue square"
                    />
                  </div>
                  <div>{{ downData.nickname }}</div>
                </div>
                <div class="times flex_">
                  <img src="/static/time.png" class="img" alt="" />
                  {{ duration }}
                </div>
              </div>
              <div class="info_2">
                {{ downData.title }}
              </div>
              <div class="info_3">
                <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">Χωρίς Υδατογράφημα</div>
                    <div class="text2">{{ WithoutVideoSize }}</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.video_url,
                        'SavingTik-Without Watermark',
                        'video'
                      )
                    "
                  >
                    Κατεβάστε
                  </div>
                </div>
                <!-- <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">Video Download</div>
                    <div class="text2">{{VideoSize }}</div>
                  </div>
                  <div class="downBtn flex_ccenter shou">Download</div>
                </div> -->
                <div class="item flex_between">
                  <div class="downLeft">
                    <div class="text1">Κατεβάστε MP3</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.mp3_url,
                        'SavingTik-Download MP3',
                        'mp3'
                      )
                    "
                  >
                    Κατεβάστε
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downStorySuccess_app" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
        </div>
        <div class="allDown flex_ccenter" @click="allIn">
          Κατεβάστε Όλες τις Φωτογραφίες
        </div>
        <div class="storyImageList flex_between">
          <div
            class="item"
            @click.stop="previewImage(item, k)"
            :key="k"
            v-for="(item, k) in downData.images"
          >
            <img :src="item" class="img" alt="" />
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click.stop="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img src="/static/appxiazai.png" class="xiazai" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess_app flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1">
                <div class="tit flex_">
                  <div class="timg">
                    <img src="/static/point.png" class="img" alt="" />
                  </div>
                  <div class="uname">{{ downData.title }}</div>
                </div>
              </div>
              <div class="info_2">{{ downData.nickname }}</div>
              <div class="times flex_between">
                <div></div>
                <div>Χρόνος — — {{ duration }}</div>
              </div>
            </div>
          </div>
          <div class="info_3">
            <div class="item flex_between">
              <div class="downLeft flex_column">
                <div class="text1">Χωρίς Υδατογράφημα</div>
                <div class="text2">{{ WithoutVideoSize }}</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.video_url,
                    'SavingTik-Without Watermark',
                    'video'
                  )
                "
              >
                Κατεβάστε
              </div>
            </div>

            <div class="item flex_between">
              <div class="downLeft">
                <div class="text1">Κατεβάστε MP3</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.mp3_url,
                    'SavingTik-Download MP3',
                    'mp3'
                  )
                "
              >
                Κατεβάστε
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="loading" v-if="isHttpLoading">
        <div class="loading-dots flex_center">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="tips flex_center">
          <div class="tip">
            <img src="/static/tip.png" class="img" alt="prompt" />
          </div>
          <div>Ανάκτηση δεδομένων, περιμένετε μερικά δευτερόλεπτα!</div>
        </div>
      </div>
      <div class="error flex_ccenter" v-if="httpError">
        <div class="hono flex_">
          <img src="/static/tishi.png" class="img" alt="prompt" />
          <div>ω όχι~</div>
        </div>
        <div class="errMsg">
          Ο τρέχων σύνδεσμος είναι λάθος. παρακαλώ αντιγράψτε τον σωστό
          σύνδεσμο.
        </div>
      </div>
      <div class="declare">
        <div class="text_content font18" style="color: #fff">
          Για την αποθήκευση περιεχομένου TikTok στη συσκευή σας,
          συμπεριλαμβανομένων ιστοριών TikTok και βίντεο TikTok, το SavingTik
          προσφέρει μια ολοκληρωμένη λύση. Μπορείτε να κατεβάσετε τις αγαπημένες
          σας ιστορίες TikTok δωρεάν χωρίς υδατογράφημα χρησιμοποιώντας την
          εφαρμογή μας, η οποία είναι συμβατή με iOS, Android και υπολογιστές.
        </div>
      </div>
      <div class="next_content flex_ccenter">
        <div class="timeline_title flex_">
          <div class="timg">
            <img src="/static/blue.webp" class="img" alt="blue square" />
          </div>
          <h3 class="h3">
            Πώς μπορώ να χρησιμοποιήσω το Savingtik για λήψη ιστοριών TikTok?
          </h3>
        </div>
        <div class="timeline_content">
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="current">1</div>
              </div>
              <div class="section-right">
                Εντοπίστε τον σύνδεσμο βίντεο TikTok tale και, στη συνέχεια, αντιγράψτε τον.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="Group flex_center">
                <div class="section-left"></div>
              </div>
              <div class="section-right">
               Αρχικά, αναζητήστε το βίντεο ιστορίας που θέλετε να κατεβάσετε στο TikTok. Υπάρχει μια επιλογή "Κοινή χρήση" σε κάθε βίντεο. Είναι η επιλογή στο δεξί κάτω μέρος. Επιλέξτε "Αντιγραφή συνδέσμου" για να αποθηκεύσετε τη διεύθυνση URL του βίντεο TikTok. Η διεύθυνση URL μπορεί επίσης να αντιγραφεί και να επικολληθεί στο πρόγραμμα περιήγησής σας.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/copy-the-tiktok-video-url.webp"
              class="sectionImg"
              alt="copy the TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="current">2</div>
              </div>
              <div class="section-right">
                Χρησιμοποιήστε το TikTok Story Downloader στο Savingtik.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="Group flex_center">
                <div class="section-left"></div>
              </div>
              <div class="section-right">
                Μπορείτε να κάνετε κλικ σε αυτή τη σελίδα ή να επισκεφτείτε το SavinTik.com. Επικολλήστε την αντιγραμμένη διεύθυνση URL στην κεφαλίδα της σελίδας. Για να επικολλήσετε τον σύνδεσμο, χρησιμοποιήστε τη συντόμευση πληκτρολογίου Ctrl+V ή το κουμπί "Παστέλ" σε κινητές συσκευές.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/paste-tiktok-video-url.webp"
              class="sectionImg"
              alt="paste TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="current">3</div>
              </div>
              <div class="section-right">Κάντε κλικ στο "Λήψη".</div>
            </div>
            <div class="section-lower flex_">
              <div class="Group flex_center">
                <div class="section-left"></div>
              </div>
              <div class="section-right">
               Επικολλήστε τον σύνδεσμο στο πρόγραμμα περιήγησής σας και κάντε κλικ στο "Λήψη" για να κάνετε λήψη της ιστορίας του TikTok στην αρχική της ποιότητα χωρίς υδατογράφημα.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/download-tiktok-story.webp"
              class="sectionImg"
              alt="download Tiktok story"
            />
          </div>
        </div>
        <div class="timeline_content_app">
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="red-dot"></div>
              </div>
              <div class="section-right">
                1. Εντοπίστε τον σύνδεσμο βίντεο TikTok tale και, στη συνέχεια, αντιγράψτε τον.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="section-right">
               Αρχικά, αναζητήστε το βίντεο ιστορίας που θέλετε να κατεβάσετε στο TikTok. Υπάρχει μια επιλογή "Κοινή χρήση" σε κάθε βίντεο. Είναι η επιλογή στο δεξί κάτω μέρος. Επιλέξτε "Αντιγραφή συνδέσμου" για να αποθηκεύσετε τη διεύθυνση URL του βίντεο TikTok. Η διεύθυνση URL μπορεί επίσης να αντιγραφεί και να επικολληθεί στο πρόγραμμα περιήγησής σας.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/copy-the-tiktok-video-url.webp"
              class="sectionImg"
              alt="copy the TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="red-dot"></div>
              </div>
              <div class="section-right">
                2. Χρησιμοποιήστε το TikTok Story Downloader στο Savingtik.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="section-right">
                Μπορείτε να κάνετε κλικ σε αυτή τη σελίδα ή να επισκεφτείτε το SavinTik.com. Επικολλήστε την αντιγραμμένη διεύθυνση URL στην κεφαλίδα της σελίδας. Για να επικολλήσετε τον σύνδεσμο, χρησιμοποιήστε τη συντόμευση πληκτρολογίου Ctrl+V ή το κουμπί "Παστέλ" σε κινητές συσκευές.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/paste-tiktok-video-url.webp"
              class="sectionImg"
              alt="paste TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="red-dot"></div>
              </div>
              <div class="section-right">3. Κάντε κλικ στο "Λήψη".</div>
            </div>
            <div class="section-lower flex_">
              <div class="section-right">
               Επικολλήστε τον σύνδεσμο στο πρόγραμμα περιήγησής σας και κάντε κλικ στο "Λήψη" για να κάνετε λήψη της ιστορίας του TikTok στην αρχική της ποιότητα χωρίς υδατογράφημα.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/download-tiktok-story.webp"
              class="sectionImg"
              alt="download Tiktok story"
            />
          </div>
        </div>
      </div>
      <div class="declare declareapp flex_ccenter" style="padding: 20px">
        <div class="text_content" style="color: #f9224c">
          Σημείωση: Μπορείτε να χρησιμοποιήσετε όλες τις λειτουργίες χωρίς να συνδεθείτε στο TikTok.
        </div>
      </div>
      <div class="table">
        <div class="table-title flex_ccenter">TikTok Story SavingTik</div>
        <div class="table-content flex_between">
          <div class="table-left">
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Μορφή:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Ποιότητα:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Ταχύτητα λήψης:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Όριο λήψης:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Κόστος:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Υπηρεσίες:</div>
            </div>
          </div>
          <div class="table-right">
            <div class="item flex_center">
              <div>MP4</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Πρωτότυπο, Ασυμπίεστο</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Γρήγορη</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>Απεριόριστο</div>
            </div>
            <div class="item flex_center">
              <div>Δωρεάν</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div> Status, Story & Short</div>
            </div>
          </div>
        </div>
      </div>
      <div class="benefits">
        <div class="beneTit flex_">
          <img src="/static/ub.webp" class="img" alt="advantages" />
          <div>Πλεονεκτήματα εξοικονόμησης ιστοριών στο Διαδίκτυο TikTok</div>
        </div>
        <div class="beneContent">
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">
              Όταν γίνεται λήψη παραμυθιών από το TikTok, αφαιρέστε αυτόματα το υδατογράφημα.
            </div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">
              Λειτουργεί με υπολογιστές, tablet και φορητές συσκευές. Το πρόγραμμα λήψης ιστοριών Savingtik TikTok είναι συμβατό με τα πιο δημοφιλή προγράμματα περιήγησης ιστού, συμπεριλαμβανομένων των Chrome, Firefox, Safari και Edge.
            </div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">
              Keep TT Tales, μια δημοφιλής μορφή ταινίας MP4.
            </div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">Αποθήκευση ιστοριών TT, μια δημοφιλής μορφή βίντεο MP4.</div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">Γρήγορες ταχύτητες λήψης.</div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">απεριόριστες και δωρεάν λήψεις.</div>
          </div>
        </div>
        <div class="benePosi">
          <!-- <img src="/static/ubmaks.png" class="img" alt="" /> -->
        </div>
      </div>

      <div class="faqs">
        <div class="flex_center">
          <h3 class="faq_title">- SavingTik Συχνές ερωτήσεις και συμβουλές -</h3>
        </div>
        <div class="faq_content">
          <div id="faq" itemscope="" itemtype="https://schema.org/FAQPage">
            <div
              itemprop="mainEntity"
              itemscope=""
              itemtype="https://schema.org/Question"
              class="faq_item shou"
              @click="changeFaqItemOpen(item, k)"
              :key="k"
              v-for="(item, k) in list"
            >
              <button style="width: 100%">
                <div class="itemTitle flex_between">
                  <h5 itemprop="name" class="tit">{{ item.title }}</h5>
                  <div class="imgs">
                    <div v-if="!item.isOpen" class="opentriangle"></div>
                    <div v-else class="closetriangle"></div>
                  </div>
                </div>
              </button>
              <div
                itemprop="acceptedAnswer"
                itemscope=""
                itemtype="https://schema.org/Answer"
              >
                <div
                  itemprop="text"
                  class="faq_text"
                  :class="item.isOpen ? '' : 'isBlock'"
                >
                  <template v-if="item.textContent">
                    {{ item.textContent }}
                  </template>
                  <ul v-else>
                    <li :key="i" v-for="(item1, i) in item.text">
                      {{ item1 }}
                    </li>
                  </ul>
                  <div v-if="item.b">
                    <b>{{ item.b.btit }}</b>
                    <div style="word-wrap: break-word">
                      {{ item.b.burl }}
                    </div>
                    <div>{{ item.b.btext }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <pc-footer></pc-footer>
      </div>
    </div>
    <div class="page_bottom flex_center">
      ©SavingTik.Com 2023 All Rights Reserved.
    </div>
    <article-content></article-content>
    <div class="app_page_bottom">
      <app-footer></app-footer>
    </div>
    <video src="" id="video" autoplay muted v-show="false"></video>
    <div class="dloading" v-if="dloading">
      <div class="loader"></div>
    </div>
    <van-popupapp ref="popupAppRef"></van-popupapp>
  </div>
</template>
    
    <script>
import dataList from "@/static/faqsStory.js";
import { handleClick } from "@/plugins/Firebase.js";
import CryptoJS from "crypto-js";
import { ImagePreview } from "vant";
import language from "@/components/language.vue";
import VanPopupapp from "@/components/vanPopupapp.vue";
import PcFooter from "@/components/pcFooter.vue";
import AppFooter from "@/components/appFooter.vue";
import ArticleContent from '~/components/articleContent.vue';

export default {
  components: { language, VanPopupapp, PcFooter, AppFooter, ArticleContent },
  head: {
    title: "TikTok Story Downloader - SavingTik",
    htmlAttrs: {
      lang: "el",
    },
    bodyAttrs: {
      "data-lang": "el",
    },
    meta: [
      { charset: "utf-8" },
      { property: "og:locale", content: "el" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
      },
      { name: "robots", content: "index, follow" },
      { name: "revisit-after", content: "1 days" },
      {
        name: "description",
        content:
          "SavingTik - Το πρόγραμμα λήψης ιστοριών του TikTok είναι δωρεάν για χρήση, χωρίς περιορισμούς ή περιορισμούς. Κατεβάστε εύκολα και απολαύστε ιστορίες χωρίς υδατογραφήματα σε υψηλή ευκρίνεια.",
      },
      {
        itemprop: "name",
        content: "TikTok Story Downloader - SavingTik",
      },
      { name: "author", content: "SavingTik" },
      { name: "msvalidate.01", content: "" },

      { itemprop: "image", content: "/static/logo/savingtik-thumb.webp" },
      { name: "twitter:card", content: "summary" },
      { name: "twitter:title", content: "TikTok Story Downloader - SavingTik" },
      {
        name: "twitter:description",
        content:
          "SavingTik - Το πρόγραμμα λήψης ιστοριών του TikTok είναι δωρεάν για χρήση, χωρίς περιορισμούς ή περιορισμούς. Κατεβάστε εύκολα και απολαύστε ιστορίες χωρίς υδατογραφήματα σε υψηλή ευκρίνεια.",
      },
      {
        name: "twitter:image:src",
        content: "/static/logo/savingtik-thumb.webp",
      },
      { name: "twitter:site", content: "SavingTik" },
      { property: "og:title", content: "TikTok Story Downloader - SavingTik" },
      { property: "og:type", content: "article" },
      { property: "og:image", content: "/static/logo/savingtik-thumb.webp" },
      {
        property: "og:description",
        content:
          "SavingTik: Το πρόγραμμα λήψης ιστοριών TikTok είναι δωρεάν για χρήση, χωρίς περιορισμούς ή περιορισμούς. Κάντε λήψη με ευκολία και απολαύστε ιστορίες χωρίς υδατογραφήματα σε υψηλή ευκρίνεια.",
      },
      { property: "og:site_name", content: "SavingTik" },
    ],
    link: [
      // Favicons
      {
        rel: "shortcut icon",
        href: "/static/logo/favicon.png",
        sizes: "512x512",
      },
      {
        rel: "apple-touch-icon",
        href: "/static/logo/favicon.png",
        sizes: "192x192",
      },
      //Apple Touch Icons

      //multilingual
      {
        rel: "alternate",
        hreflang: "x-default",
        href: "https://savingtik.com/el/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "en",
        href: "https://savingtik.com/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "en-in",
        href: "https://savingtik.com/in/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "vi",
        href: "https://savingtik.com/vn/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "tr",
        href: "https://savingtik.com/tr/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "id",
        href: "https://savingtik.com/id/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "fr",
        href: "https://savingtik.com/fr/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "pt",
        href: "https://savingtik.com/pt/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ru",
        href: "https://savingtik.com/ru/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "es",
        href: "https://savingtik.com/es/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ms",
        href: "https://savingtik.com/ms/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ko",
        href: "https://savingtik.com/ko/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ja",
        href: "https://savingtik.com/ja/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "jv",
        href: "https://savingtik.com/jv/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "cs",
        href: "https://savingtik.com/cs/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "de",
        href: "https://savingtik.com/de/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "it",
        href: "https://savingtik.com/it/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "pl",
        href: "https://savingtik.com/pl/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "hu",
        href: "https://savingtik.com/hu/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "nl",
        href: "https://savingtik.com/nl/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ro",
        href: "https://savingtik.com/ro/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "el",
        href: "https://savingtik.com/el/download-tiktok-story",
      },
      {
        rel: "canonical",
        href: "https://savingtik.com/el/download-tiktok-story",
      },
    ],
  },
  name: "download-Story",
  data() {
    return {
      list: dataList.listEl,
      input: "",
      dloading: false,
      showAppRight: false,
      showLanguage: false,
      Language: "en_GB",
      isHttpLoading: false,
      downSuccess: false,
      downStorySuccess: false,
      httpError: false,
      downData: {},
      WithoutVideoSize: "",
      duration: "",
      VideoSize: "",
    };
  },
  mounted() {
    this.debouncedDownInput = this.debounce(this.downInput, 1000);
  },
  methods: {
    showAppRightHandel() {
      this.$refs.popupAppRef.open();
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    goToTop(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToTools(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "tools",
      });
    },
    debounce(fn, delay) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    },
    downInput(e) {
      // 粘贴链接到输入框 action_tt_paste
      handleClick("action_tt_paste", {
        islink: e.target.value,
        from: "story",
      });
    },
    handleInput(e) {
      this.debouncedDownInput(e);
    },
    changeLanguage() {
      if (this.$i18n.locale == "en") {
        this.$i18n.setLocale("zh");
      } else {
        this.$i18n.setLocale("en");
      }
    },
    previewImage(item, k) {
      ImagePreview({
        images: this.downData.images,
        startPosition: k,
      });
    },
    sendDownload(event) {
      if (event.keyCode === 13 && !this.isHttpLoading) {
        this.Download();
        event.preventDefault();
        return false;
      }
    },
    async allIn() {
      // 设定 URL 数组
      //点击开始下载按钮 action_tt_download_start
      handleClick("action_tt_download_start", {
        site: "all",
        from: "story",
      });
      // 通过 map 返回一个 Promise 数组
      let promises = this.downData.images.map((url) =>
        this.handleDownloadImages(url)
      );

      // 等待所有 Promise 完成
      await Promise.all(promises);
      this.dloading = false;
    },
    async handleDownloadImages(src) {
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik-" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        // //开始下载 tt_download_start
        handleClick("tt_download_start", {
          site: "all",
          from: "story",
        });
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    async handleDownload(src, fileName, type) {
      if (type == "image") {
        //点击开始下载 action_tt_download_start
        handleClick("action_tt_download_start", {
          site: "story",
          from: "story",
        });
      } else if (type == "video") {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "video",
          from: "story",
        });
      } else {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "mp3",
          from: "story",
        });
      }
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik-" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        this.dloading = false;
        if (type == "image") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "story",
            from: "story",
          });
        } else if (type == "video") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "video",
            from: "story",
          });
        } else {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "mp3",
            from: "story",
          });
        }
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    encryptUrl(url, key, iv) {
      // DES 加密
      let encrypted = CryptoJS.DES.encrypt(
        `m=url&url=${encodeURIComponent(url)}`,
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      // 转 Base64
      let base64String = encrypted.toString();
      // URL 编码
      let result = encodeURIComponent(base64String);
      // 最终结果
      return `https://savingtik.com/tt.php?v=${result}`;
    },
    decryptUrl(encryptedUrl, key, iv) {
      // URL 解码
      const decodedUrl = decodeURIComponent(encryptedUrl);

      // Base64 解码
      const parsedWordArray = CryptoJS.enc.Base64.parse(decodedUrl);

      // DES解密
      const decrypted = CryptoJS.DES.decrypt(
        {
          ciphertext: parsedWordArray,
        },
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      return decrypted.toString(CryptoJS.enc.Utf8);
    },
    async Download() {
      // 早些返回以避免嵌套
      if (this.isHttpLoading || this.input === "") return;
      this.downData = {};
      this.httpError = false;
      this.downStorySuccess = false;
      this.downSuccess = false;
      const tiktokUrlPattern = new RegExp("^http(s|)://.*tiktok.com.*/.*$");
      if (!tiktokUrlPattern.test(this.input)) {
        //点击解析下载按钮 action_tt_detect_bottom
        handleClick("action_tt_detect_bottom", {
          site: "other",
          noislink: this.input,
          from: "story",
        });
        this.httpError = true;
        this.isHttpLoading = false;
        return;
      }
      //点击解析下载按钮 action_tt_detect_bottom
      handleClick("action_tt_detect_bottom", {
        site: "tt",
        from: "story",
      });
      //开始解析  tt_start_resolve
      handleClick("tt_start_resolve", {
        islink: this.input,
        from: "story",
      });
      this.isHttpLoading = true;

      try {
        let result = this.encryptUrl(this.input, process.env.DES_KEY, process.env.DES_IV);
        const response = await fetch(result, {
          method: "GET",
          headers: { "Content-Type": "application/json" },
        });
        let encryptedResponse = await response.text();
        let decryptedResponse = this.decryptUrl(
          encryptedResponse,
          process.env.DES_KEY,
          process.env.DES_IV
        ); // 使用你的解密函数
        let data = JSON.parse(decryptedResponse).data;
        // 检查数据是否存在
        if (!data) {
          this.httpError = true;
          this.isHttpLoading = false;
          return;
        }

        if (!data.images) {
          await this.fetchVideoAttributes(data);
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "video",
            from: "story",
          });
        } else {
          this.downData = data;
          this.downStorySuccess = true;
          this.isHttpLoading = false;
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "story",
            from: "story",
          });
        }
      } catch (error) {
        //解析失败  tt_resolve_fail
        handleClick("tt_resolve_fail", {
          reason: "Failed to fetch",
          islink: this.input,
          from: "story",
        });
        console.error(error);
        this.httpError = true;
        this.isHttpLoading = false;
      }
    },

    async fetchVideoAttributes(data) {
      try {
        const videoBlob = await fetch(data.video_url).then((res) => res.blob());
        this.WithoutVideoSize = `${(videoBlob.size / (1024 * 1024)).toFixed(
          2
        )} MB`;
        // const videoBlob1 = await fetch(this.input).then((res) => res.blob());
        // this.VideoSize  = `${(videoBlob1.size / (1024 * 1024)).toFixed(
        //   2
        // )} MB`;
        const video = document.getElementById("video");
        video.setAttribute("src", data.video_url);
        video.crossOrigin = "anonymous";
        video.innerHTML = `<source src=${data.video_url} type="audio/mp4" >`;

        await new Promise((resolve) =>
          video.addEventListener("canplaythrough", () => {
            this.duration = this.formatSeconds(video.duration);
            resolve();
          })
        );

        await new Promise((resolve) => {
          const image = new Image();
          image.onload = resolve;
          image.src = data.cover;
        });

        this.downData = data;
        this.isHttpLoading = false;
        this.downSuccess = true;
      } catch (error) {
        console.error(error);
        this.httpError = true;
        this.isHttpLoading = false;
      }
    },

    formatSeconds(seconds) {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds - hours * 3600) / 60);
      const secs = Math.floor(seconds % 60);

      // 使用模板字符串清理时间格式化
      const time = [
        hours ? (hours > 9 ? hours : `0${hours}`) : undefined,
        minutes > 9 ? minutes : `0${minutes}`,
        secs > 9 ? secs : `0${secs}`,
      ]
        .filter(Boolean)
        .join(":");

      return time;
    },
    changeFaqItemOpen(item, k) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>
    <style lang="scss" scoped>
@import "@/static/style/story.css";
.dloading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;

  .loader {
    width: 88px;
    height: 88px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .loader:before {
    content: "";
    width: 148px;
    height: 10px;
    background: #202a68;
    position: absolute;
    top: 116px;
    left: -27px;
    border-radius: 50%;
    animation: shadow324 0.5s linear infinite;
  }

  .loader:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #202a68;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    animation: jump7456 0.5s linear infinite;
  }

  @keyframes jump7456 {
    15% {
      border-bottom-right-radius: 3px;
    }

    25% {
      transform: translateY(9px) rotate(22.5deg);
    }

    50% {
      transform: translateY(18px) scale(1, 0.9) rotate(45deg);
      border-bottom-right-radius: 40px;
    }

    75% {
      transform: translateY(9px) rotate(67.5deg);
    }

    100% {
      transform: translateY(0) rotate(90deg);
    }
  }

  @keyframes shadow324 {
    0%,
    100% {
      transform: scale(1, 1);
    }

    50% {
      transform: scale(1.2, 1);
    }
  }
}
.loading-dots {
  position: relative;
  z-index: 999;
  margin-top: 70px;
}

.dot {
  background-color: #83818c;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 10px;
  animation: loading-animation 1.5s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.5s;
}

.dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes loading-animation {
  0%,
  80%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
}
</style>